<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-10-17 10:13:29
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-07-26 14:16:42
 * @FilePath: \hy-ui\src\views\app\appInfo\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    custom-class="smallClass"
    :title="type === '4' ? '新增' : '修改'"
    :visible.sync="open"
    width="80%"
    :before-close="close"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      class="demo-ruleForm"
      :rules="rules"
    >
      <div class="box">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" clearable placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="编码" prop="code">
          <el-input v-model="form.code" clearable placeholder="请输入编码" />
        </el-form-item>
         <el-form-item label="数据表前缀" :prop="!!id ? '' : 'tablePrefix'">
          <el-input v-model="form.tablePrefix" clearable placeholder="请数据表前缀"  :disabled="!!id"/>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="form.remark" clearable placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            v-model="form.sort"
            clearable
            placeholder="请输入排序"
            type="number"
          />
        </el-form-item>
        <el-form-item label="父级节点" prop="category">
          <el-select
            v-model="form.category"
            placeholder="请选择父级节点"
            style="width: 100%"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in bigList"
              :key="item.id"
              v-show="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-popover
            placement="bottom-start"
            width="460"
            trigger="click"
            @show="$refs['iconSelect'].reset()"
          >
            <IconSelect
              ref="iconSelect"
              @selected="selected"
              :active-icon="form.icon"
            />
            <el-input
              slot="reference"
              v-model="icon"
              placeholder="点击选择图标"
              readonly
            >
              <svg-icon
                v-if="icon"
                slot="prefix"
                :icon-class="icon"
                style="width: 25px"
              />
              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
            </el-input>
          </el-popover>
        </el-form-item>
        <el-form-item label="背景色" prop="backcolor">
          <div style="display: flex">
            <span
              class="bgSquire"
              :style="{ background: item.color }"
              v-for="item in bgSquire"
              :key="item.id"
              @click="handleColorChange(item)"
              ><i class="el-icon-check" v-show="item.id === currentColorId"></i
            ></span>
          </div>
        </el-form-item>
        <el-form-item label="移动端显示" prop="mobileDisplay">
          <el-switch v-model="form.mobileDisplay"></el-switch>
        </el-form-item>
        <el-form-item label="是否公共" prop="isPublic">
          <el-switch v-model="form.isPublic"></el-switch>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  listAppInfo,
  getAppInfo,
  delAppInfo,
  addAppInfo,
  updateAppInfo,
} from "@/api/app/appInfo";
import {
  listAppCategory,
  getAppCategory,
  addAppCategory,
} from "@/api/app/appCategory";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
export default {
  name: "bigClassAdd",
  components: { Treeselect, IconSelect },
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    close: {
      type: Function,
      default: () => {},
    },
    getList: {
      type: Function,
      default: () => {},
    },
    type: {
      type: String,
      default: "",
    },
    bigList: {
      type: Array,
      default: () => [],
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {},
      currentColorId: undefined,
      icon: undefined,
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { max: 10, message: "长度最多10个字符", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入编码", trigger: "blur" }],
        tablePrefix:  [{ required: true, message: "请输入数据表前缀", trigger: "blur" },{ max: 10, message: "长度最多10个字符", trigger: "blur" },],
      },
      bgSquire: [
        {
          id: "1",
          color: "rgb(245, 34, 45)",
        },
        {
          id: "2",
          color: "rgb(250, 84, 28)",
        },
        {
          id: "3",
          color: "rgb(250, 173, 20)",
        },
        {
          id: "4",
          color: "rgb(19, 194, 194)",
        },
        {
          id: "5",
          color: "rgb(82, 196, 26)",
        },
        {
          id: "6",
          color: "rgb(24, 144, 255)",
        },
        {
          id: "7",
          color: "rgb(47, 84, 235)",
        },
        {
          id: "8",
          color: "rgb(114, 46, 209)",
        },
      ],
    };
  },
  methods: {
    // 选择图标
    selected(name) {
      this.form.icon = name;
      this.icon = name;
    },
    handleColorChange(item) {
      this.form.backcolor = item.color;
      this.currentColorId = item.id;
    },
    handleSubmit() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const params = { ...this.form };
          params.isPublic ? params.isPublic === "1" : params.isPublic === "0";
          params.mobileDisplay
            ? params.mobileDisplay === "1"
            : params.mobileDisplay === "0";
            let res = undefined
            if(this.id && this.type === '1') {
             res = await updateAppInfo(this.form);
            }else{
              res = await addAppInfo(this.form);  
            }
          if (res.code == 200) {
           (this.id && this.type === '1') ?  this.$message.success("设置成功") : this.$message.success("新增成功")
            this.close();
            this.getList();
          }
        }
      });
    },
  },
  async mounted(){
    console.log(this.id);
    if(this.id && this.type === '1'){
       const res = await getAppInfo(this.id)
       if(res.code == 200) {
        this.form = res.data
        this.form.isPublic  = this.form.isPublic === 'true' ? true : false
         this.form.mobileDisplay  = this.form.mobileDisplay === 'true' ? true : false
         this.icon = this.form.icon
         this.currentColorId = this.bgSquire.filter(item=>item.color == this.form.backcolor)?.[0]?.id
       }
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  display: grid;
  // grid-template-rows: 50% 50%;
  grid-template-columns: 1fr 1fr;
  // grid-template-rows: auto auto;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-items: stretch;
  align-items: start;
}
.bgSquire {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  cursor: pointer;
  margin: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  ::v-deep .el-icon-check {
    color: #fff;
  }
}
</style>
